<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        ul,
        li {
            list-style: none
        }

        a {
            text-decoration: none
        }

        .nav {
            width: 460px;
            height: 35px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }

        li {
            float: left;
            /* 阶梯bug */
            position: relative;
        }

        a {
            float: left;
            width: 114px;
            height: 35px;
            border-right: #ccc 1px solid;
            text-align: center;
            line-height: 35px;
            /* 单行文本垂直居中 */
            font-size: 14px;
            color: #000
        }
        ol{
            width: 115px;
            height: 140px;
            position: absolute;
            top: 35px;
            display: none

        }
        ol li{
            width: 115px;
            height: 35px;
            text-align: center;
            line-height: 35px;
            font-size: 12px;
            color: #000;
        }
        .box:hover ol{
            display: block;background: #eeeeee
        }
        .box:hover a{
            background: #333;
            color: #fbfef3;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li class="box">
            <a href="">
                红浪漫
            </a>
            <ol>
                <li>技师1</li>
                <li>技师2</li>
                <li>技师3</li>
                <li>技师4</li>
            </ol>
        </li>
        <li><a href="">螺丝厂</a>
        </li>
        <li><a href="">洗脚城</a></li>
        <li><a href="" style="border: none">火葬场</a></li>
    </ul>
</body>

</html>